<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script src="../assets/js/echarts.js"></script>
    <script src="../assets/js/jquery.min.js"></script>
    <script src="../assets/common.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="pie" style="width: 600px; height: 400px;"></div>
<div id="bar" style="width: 600px; height: 400px;"></div>
<div id="line" style="width: 600px; height: 400px;"></div>
<div id="funnel" style="width: 600px; height: 400px;"></div>
<div id="radar" style="width: 600px; height: 400px;"></div>
<script type="text/javascript">
    var optionradar = {



        polar : [
            {
                indicator : [
                    { text: '销售（sales）', max: 6000},
                    { text: '管理（Administration）', max: 16000},
                    { text: '信息技术（Information Techology）', max: 30000},
                    { text: '客服（Customer Support）', max: 38000},
                    { text: '研发（Development）', max: 52000},
                    { text: '市场（Marketing）', max: 25000}
                ]
            }
        ],
        calculable : true,
        series : [
            {
                name: 'name',
                type: 'radar',
                data : [
                    {
                        value : [4300, 10000, 28000, 35000, 50000, 19000],
                        name : 'name2'
                    }
                ]
            }
        ]
    };
    charts(optionradar,'radar');
/*    var optionpie = {
        legend: {
            orient : 'horizontal',
            y : 'bottom',
            data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        calculable : true,
        series : [
            {
                name:'访问来源',
                type:'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'搜索引擎'}
                ]
            }
        ]
    };
    var optionbar = {



        calculable : true,
        xAxis : [
            {
                type : 'value',
                boundaryGap : [0, 0.01]
            }
        ],
        yAxis : [
            {
                type : 'category',
                data : ['巴西','印尼','美国','印度','中国','世界人口(万)']
            }
        ],
        series : [

            {
                name:'2012年',
                type:'bar',
                data:[19325, 23438, 31000, 121594, 134141, 681807]
            }
        ]
    };
    var optionline = {

        legend: {
            data:['最高气温'],
            orient : 'horizontal',
            y : 'bottom',
        },

        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value} °C'
                }
            }
        ],
        series : [
            {
                name:'最高气温',
                type:'line',
                data:[11, 11, 15, 13, 12, 13, 10],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            }
        ]
    };
    var optionfunnel = {


        legend: {
            data : ['展现','点击','访问','咨询','订单'],
            orient : 'horizontal',
            y : 'bottom',
        },
        calculable : true,
        series : [
            {
                name:'漏斗图',
                type:'funnel',
                x: '10%',
                y: 60,
                //x2: 80,
                y2: 60,
                width: '80%',
                // height: {totalHeight} - y - y2,
                min: 0,
                max: 100,
                minSize: '0%',
                maxSize: '100%',
                sort : 'descending', // 'ascending', 'descending'
                gap : 10,
                itemStyle: {
                    normal: {
                        // color: 各异,
                        borderColor: '#fff',
                        borderWidth: 1,
                        label: {
                            show: true,
                            position: 'inside'
                            // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
                        },
                        labelLine: {
                            show: false,
                            length: 10,
                            lineStyle: {
                                // color: 各异,
                                width: 1,
                                type: 'solid'
                            }
                        }
                    },
                    emphasis: {
                        // color: 各异,
                        borderColor: 'red',
                        borderWidth: 5,
                        label: {
                            show: true,
                            formatter: '{b}:{c}%',
                            textStyle:{
                                fontSize:20
                            }
                        },
                        labelLine: {
                            show: true
                        }
                    }
                },
                data:[
                    {value:60, name:'访问'},
                    {value:40, name:'咨询'},
                    {value:20, name:'订单'},
                    {value:80, name:'点击'},
                    {value:100, name:'展现'}
                ]
            }
        ]
    };
    var optionradar = {

            legend: {
                orient : 'vertical',
                y : 'bottom',
                data:['预算分配（Allocated Budget）']
            },

            polar : [
                {
                    indicator : [
                        { text: '销售（sales）', max: 6000},
                        { text: '管理（Administration）', max: 16000},
                        { text: '信息技术（Information Techology）', max: 30000},
                        { text: '客服（Customer Support）', max: 38000},
                        { text: '研发（Development）', max: 52000},
                        { text: '市场（Marketing）', max: 25000}
                    ]
                }
            ],
            calculable : true,
            series : [
                {
                    name: '预算 vs 开销（Budget vs spending）',
                    type: 'radar',
                    data : [
                        {
                            value : [4300, 10000, 28000, 35000, 50000, 19000],
                            name : '预算分配（Allocated Budget）'
                        }
                    ]
                }
            ]
        };
    charts(optionpie,'pie');
    charts(optionbar,'bar');
    charts(optionline,'line');
    charts(optionfunnel,'funnel');
    charts(optionradar,'radar');*/
    $(function(){
        getDta();
    })
    function getDta(){
        $.ajax({
            url:'http://120.77.82.251:9001/push/v3.0/user/ai/analysis?user_id=1&staff_id=1&enterprise_id=1',
            type: 'GET',
            contentType: 'application/json',
            //headers: {'session_id': sessionid},
            success: function (result) {
                pie(result,'pie');
                bar(result,'bar');
                line(result,'line')

            }

        })
    }
    function pie (result,id){
        var legend=[];
        for(item in result.pie){
            legend.push(result.pie[item].name)
        }
        var optionpie = {
            legend: {
                orient : 'horizontal',
                y : 'bottom',
                data:legend
            },
            calculable : true,
            series : [
                {
                    name:'访问来源',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:result.pie
                }
            ]
        };
        charts(optionpie,id)

    }
    function bar(result,id){
        var legend=[];
        var data=[];
        for(item in result.bar){
            legend.push(result.bar[item].name);
            data.push(result.bar[item].value)
        }
        var optionbar = {
            calculable : true,
            xAxis : [
                {
                    type : 'value',
                    boundaryGap : [0, 0.01]
                }
            ],
            yAxis : [
                {
                    type : 'category',
                    data : legend
                }
            ],
            series : [

                {
                    name:'2012年',
                    type:'bar',
                    data:data
                }
            ]
        };
        charts(optionbar,id)
    }
    function line(result,id){
        var legend=[];
        var data=[];
        for(item in result.line){
            legend.push(result.line[item].name);
            data.push(result.line[item].value)
        }
        var optionline = {
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : legend
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        formatter: '{value} °C'
                    }
                }
            ],
            series : [
                {
                    name:'最高气温',
                    type:'line',
                    data:data,
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };
        charts(optionline,id)
    }
    function charts(option,id){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(id));
        // 指定图表的配置项和数据
        option =option;
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }



</script>
</body>
</html>